<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="300" height="100"></canvas>
    <script src="./js/digit.js"></script>
    <script>
        
        var WINDOW_WIDTH,WINDOW_HEIGHT,RADIUS,MARGIN_TOP,MARGIN_LEFT; 

        var curShowTimeSeconds = 0;

        var balls = [];
        var colors=['#ffcc00','#ff00cc','#ccff00','#cc00ff','#00ffcc','#00ccff'];

        window.onload = function(){
            WINDOW_WIDTH = document.body.clientWidth;
            WINDOW_HEIGHT = document.body.clientHeight;
            MARGIN_LEFT = Math.round(WINDOW_WIDTH/10);
            MARGIN_TOP = Math.round(WINDOW_HEIGHT/5);
            RADIUS = Math.round(WINDOW_WIDTH*4/5/200)-1;

            var canvas = document.getElementById('canvas');
            canvas.width = WINDOW_WIDTH;
            canvas.height = WINDOW_HEIGHT;
            var context = canvas.getContext('2d');
            curShowTimeSeconds = getCurrentShowTimeSeconds();
            

            setInterval(function(){
                render(context);
                update()
                
            },50)
        }
        
        function update(){
            var nextShowTimeSeconds = getCurrentShowTimeSeconds();
            var nextHour = parseInt(nextShowTimeSeconds/3600);
            var nextMinute = parseInt((nextShowTimeSeconds - nextHour*3600)/60);
            var nextSecond = nextShowTimeSeconds%60;
            

            var curHour = parseInt(curShowTimeSeconds/3600);
            var curMinute = parseInt((curShowTimeSeconds - curHour*3600)/60);
            var curSecond = curShowTimeSeconds%60;

            if(nextSecond != curSecond){
                
                if(parseInt(curHour/10) != parseInt(nextHour/10)){
                    addBalls(MARGIN_LEFT,MARGIN_TOP,parseInt(curHour/10));
                }

                if(parseInt(curHour%10) != parseInt(nextHour%10)){
                    addBalls(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(curHour%10));
                }
                
                if(parseInt(curMinute/10) != parseInt(nextMinute/10)){
                    addBalls(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(curMinute/10));
                }
                
                if(parseInt(curMinute%10) != parseInt(nextMinute%10)){
                    addBalls(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(curMinute%10));
                }
                
                if(parseInt(curSecond/10) != parseInt(nextSecond/10)){
                    addBalls(MARGIN_LEFT+79*(RADIUS+1),MARGIN_TOP,parseInt(curSecond/10));
                }
                
                if(parseInt(curSecond%10) != parseInt(nextSecond%10)){
                    addBalls(MARGIN_LEFT+94*(RADIUS+1),MARGIN_TOP,parseInt(nextSecond%10));
                }

                curShowTimeSeconds = nextShowTimeSeconds;
            }

            updateBalls();
        }

        function updateBalls(){

            for(var i=0;i<balls.length;i++){
                balls[i].x += balls[i].vx;
                balls[i].y += balls[i].vy;
                balls[i].vy += balls[i].g;

                if( balls[i].y >= WINDOW_HEIGHT - RADIUS){
                    balls[i].y = WINDOW_HEIGHT - RADIUS;
                    balls[i].vy = - balls[i].vy *0.75;
                }
            }

            var count = 0;
            for(var i=0;i<balls.length;i++){
                if(balls[i].x + RADIUS >0 && balls[i].x - RADIUS < WINDOW_WIDTH){
                    balls[count++] = balls[i]
                }
            }
            while( balls.length > count ){
                balls.pop();
            }
        }

        function addBalls(x,y,num){
            for(var i=0;i<digit[num].length;i++){
                for(var j=0;j<digit[num][i].length;j++){
                    if(digit[num][i][j] == 1){
                        var aBall = {
                            x : x+j*2*(RADIUS+1)+(RADIUS+1),
                            y : y+i*2*(RADIUS+1)+(RADIUS+1),
                            g : 1.5+Math.random(),
                            vx : Math.pow(-1,Math.ceil(Math.random()*1000))*4,//取4或者-4
                            vy:-5,
                            color:colors[Math.floor(Math.random()*colors.length)]
                        }
                        balls.push( aBall );
                    }
                }
            }
        }

        function getCurrentShowTimeSeconds(){
            var curTime = new Date();
            var ret = curTime.getHours()*3600 + curTime.getMinutes()*60 + curTime.getSeconds();
            return ret;

        }
        function render(ctx){
            ctx.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT)
            var hour = parseInt(curShowTimeSeconds/3600);
            var minute = parseInt((curShowTimeSeconds - hour*3600)/60);
            var second = curShowTimeSeconds%60;
            
            renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hour/10),ctx);
            renderDigit(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hour%10),ctx);
            renderDigit(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,ctx);
            renderDigit(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(minute/10),ctx);
            renderDigit(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(minute%10),ctx);
            renderDigit(MARGIN_LEFT+69*(RADIUS+1),MARGIN_TOP,10,ctx);
            renderDigit(MARGIN_LEFT+79*(RADIUS+1),MARGIN_TOP,parseInt(second/10),ctx);
            renderDigit(MARGIN_LEFT+94*(RADIUS+1),MARGIN_TOP,parseInt(second%10),ctx);

            for(var i=0;i<balls.length;i++){
                ctx.fillStyle = balls[i].color;
                ctx.beginPath();
                ctx.arc(balls[i].x,balls[i].y,RADIUS,0,2*Math.PI,true);
                ctx.closePath();
                ctx.fill();
            }

        }
        
        function renderDigit(x,y,num,ctx){
            for(var i=0;i<digit[num].length;i++){
                for(var j=0;j<digit[num][i].length;j++){
                    if(digit[num][i][j] == 1){
                        draw(x+j*2*(RADIUS+1)+(RADIUS+1),y+i*2*(RADIUS+1)+(RADIUS+1),RADIUS,ctx)
                    }
                }
            }
        }

        function draw(x,y,r,ctx){
            
            ctx.beginPath();
            ctx.arc(x,y,r,0,2*Math.PI);
            ctx.fillStyle = '#000';
            ctx.fill();
            ctx.closePath();
        }
    
    </script>
</body>
</html>